import React, { Component } from "react";
import { Modal, message, Checkbox } from "antd";

class CancelPopup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
  }

  handleCancel = () => {
    const { onCancel } = this.props;
    onCancel && onCancel();
  };

  handleOk = () => {
    const { onOk } = this.props;
    const { checked } = this.state;
    if (checked) {
      onOk && onOk();
    } else {
      message.destroy();
      message.warn("请先确认是否付款");
    }
  };

  render() {
    const { checked } = this.state;
    return (
      <Modal
        title={"确认取消订单"}
        width={440}
        cancelText={"我再想想"}
        okText={"确认取消"}
        wrapClassName="v-center-modal"
        visible={true}
        onCancel={this.handleCancel}
        onOk={this.handleOk}
      >
        <div style={{ textAlign: "center", padding: "20px 20px 4px" }}>
          <div style={{textAlign: "left"}}>
            <span style={{ color: "#df553a" }}>
              如果您已经向卖家付款，请千万不要取消交易。
            </span>
            取消规则：买家当天累计3笔取消，会限制当日C2C交易功能。
          </div>
          <div style={{ marginTop: 20 }}>
            <Checkbox
              checked={checked}
              style={{ color: "#dadada" }}
              onChange={e => {
                this.setState({ checked: e.target.checked });
              }}
            >
              我确认还没有付款给对方
            </Checkbox>
          </div>
        </div>
      </Modal>
    );
  }
}

export default CancelPopup;
